<template>
  <view class="layout" :style="{ paddingTop: `${props.paddingTop}px` }">
    <view class="content">
      <view class="flex-between">
        <view class="name">
          <wd-text
            :text="curStudentInfo.name"
            color="#333333"
            size="18px"
            bold
          />
          <view>
            <wd-text :text="gradeClass" color="#333333" size="12px" bold />
          </view>
        </view>
        <view class="right-content">
          <view class="level">
            <wd-text
              text="Lv.2"
              color="#B57303"
              size="12px"
              bold
              style="margin-left: 30px"
            />
            <wd-text text="运动小将" color="#333333" size="10px" bold />
            <image src="/static/images/boy.png" class="boy" />
          </view>
          <wd-progress
            :percentage="60"
            hide-text
            custom-class="custom-progress"
          />
          <view class="score">
            <wd-text
              :text="`成长值:${curStudentInfo.score}`"
              color="#095AEB"
              size="10px"
              bold
            />
          </view>
        </view>
      </view>
    </view>
    <image
      :src="curStudentInfo.url || avatar"
      class="logo"
      :style="{ top: `${props.paddingTop - 10}px` }"
    />
  </view>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import EnumsType from "@/enums/commonEnum";
import avatar from "@/static/images/avatar.jpg";
import { useStudentStore } from "@/store/student";

const props = defineProps<{
  paddingTop: {
    type: number;
    default: 90; // 默认值
  };
}>();
const studentStore = useStudentStore();
const { curStudentInfo } = storeToRefs(studentStore);
console.log("当前学生信息:", curStudentInfo);
const gradeClass = computed(() => {
  return `${EnumsType.GRADE_TYPE[curStudentInfo.value.gradeValue]}${EnumsType.CLASS_TYPE[curStudentInfo.value.classValue]}`;
});
// reactive<{
//   name: string;
//   logo: string;
//   project: string;
//   level: number;
//   score: number;
//   weight: string;
// }>({
//   logo: avatar,
//   name: "唐小鸭",
//   project: "四年级1班",
//   level: 2,
//   score: 2500,
// });
</script>

<style lang="scss" scoped>
.layout {
  position: relative;
  padding: 100px 15px 10px 15px;
  width: calc(100vw - 30px);
  .logo {
    position: absolute;
    left: 30px;
    top: 90px;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    z-index: 20;
  }
  .content {
    margin-top: 30px;
    width: 100%;
    height: 90px;
    border-radius: 10px;
    background: #ffffff;
  }
  .name {
    padding-top: 23px;
    padding-left: 20px;
  }
  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

:deep(.custom-progress) {
  width: 40%;
  margin-top: 10px;
}
.right-content {
  width: 40%;
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.level {
  margin-top: 10px;
  position: relative;
  padding: 0 5px;
  display: flex;
  height: 20px;
  justify-content: space-between;
  border-radius: 6px;
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 236, 94, 0) 0%, #ffec5e 100%);
  .boy {
    position: absolute;
    left: 0;
    top: -5px;
    width: 21px;
    height: 21px;
  }
}

.score {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
